<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
    draggable
  >
    <el-form
      ref="dataFormRef"
      v-loading="state.loading"
      :model="form"
      :rules="dataRules"
      label-width="80px"
      :disabled="state.operType === 'view'"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="名称" prop="listenerName">
            <el-input
              v-model="form.listenerName"
              placeholder="请输入监听器名称"
              length="32"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <DictSelect
              v-model:defaultValue="form.status"
              dict-code="1022"
              showAll="N"
              expanding
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="类名" prop="className">
            <el-input v-model="form.className" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="remark" label="备注">
            <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-if="state.operType !== 'view'" #footer>
      <span class="dialog-footer">
        <el-button type="warning" @click="close">{{
          translate("buttons.cancel")
        }}</el-button>
        <el-button type="primary" :disabled="state.loading" @click="onSubmit">
          {{ translate("buttons.confirm") }}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="EventListenerEdit">
import { useMessage } from "@/hooks/message";
import { addObj, updateObj } from "@/api/flow/eventlistener";
import { ref } from "vue";
import { cloneObject } from "@/utils/common";
import { translate } from "@/plugins/i18n";
import DictSelect from "@/components/dictSelect.vue";

const props = defineProps({
  title: {
    type: String,
    default: "事件监听器"
  },
  width: {
    type: String,
    default: "60%"
  },
  model: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(["refresh"]);

// 定义变量内容
const dataFormRef = ref();

onMounted(() => {});

const state = reactive({
  dialogTitle: props.title,
  dialogVisible: false,
  loading: false,
  operType: false
});

// 提交表单数据
const form = reactive({
  id: "",
  listenerName: "",
  className: "",
  status: "0",
  remark: ""
});

// 定义校验规则
const dataRules = ref({
  listenerName: [
    {
      required: true,
      message: "名称不能为空",
      trigger: "blur"
    }
  ],
  className: [
    { required: true, message: "处理器类名不能为空", trigger: "blur" }
  ],
  status: [{ required: true, message: "状态不能为空", trigger: "blur" }]
});

// 打开弹窗
const show = (type, row) => {
  state.dialogVisible = true;
  state.operType = type;
  form.id = "";
  if (type === "add") {
    state.dialogTitle = `新增${props.title}`;
  } else if (type === "edit") {
    state.dialogTitle = `修改${props.title}`;
  } else if (type === "view") {
    state.dialogTitle = `查看${props.title}`;
  }
  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });
  if (row.id) {
    cloneObject(form, row);
  }
};

// 提交
const onSubmit = async () => {
  console.log("form", form);
  const valid = await dataFormRef.value.validate().then(valid => {
    if (!valid) return false;
    state.loading = true;
    if (form.id) {
      updateObj(form).then(res => {
        if (res.code === 200) {
          useMessage().success("保存成功");
          emit("refresh");
          close();
        } else {
          useMessage().error(res.msg);
        }
      });
    } else {
      addObj(form).then(res => {
        if (res.code === 200) {
          useMessage().success("保存成功");
          emit("refresh");
          close();
        } else {
          useMessage().error(res.msg);
        }
      });
    }
  });
  state.loading = false;
};

const close = () => {
  state.dialogTitle = props.title;
  dataFormRef.value?.resetFields();
  state.dialogVisible = false;
};

// 暴露变量
defineExpose({
  show,
  close
});
</script>
